<template>
    <app-layout>
        <view class="shop">
            <view class="product-list" v-if="goods_list.length > 0 && onStart">
                <u-ordinary-list :reset="reset" :pagination="true" :isShowAttr="true" :previewUrl="order_preview"
                                 :submitUrl="order_submit" :list="goods_list" :theme="getTheme"
                                 :list-style="2"
                ></u-ordinary-list>
            </view>
            <view style="margin-top: 240rpx" v-if="goods_list.length == 0 && onStart">
                <app-no-goods background="#f7f7f7"></app-no-goods>
            </view>
            <mch-navbar v-if="mch_id" :mchId="mch_id"></mch-navbar>
        </view>
    </app-layout>
</template>

<script>
import {mapGetters, mapState} from 'vuex';
import mchNavbar from "../mch-navbar";
import appNoGoods from "../../../components/page-component/app-no-goods/app-no-goods";
import uOrdinaryList from '../../../components/page-component/u-goods-list/u-ordinary-list.vue';

export default {
    name: "goods",
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
        }),
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme',
        }),
    },
    data() {
        return {
            onStart: false,
            order_preview: this.$api.mch.order_preview,
            order_submit: this.$api.mch.order_submit,
            reset: true,


            goods_list: [],
            page_count: 1,
            coupon_id: 0,
            page: 1,
            cat_id: 0,
            sort: 1,
            tabbarbool: true,
            sort_type: 1,
            first_req: true,
            listStyle: false,
            noGoods: false,
            loading: false,
            sign: '',
            mch_id: '',
        }
    },
    onLoad(options) {
        this.$commonLoad.onload(options);
        this.mch_id = options.mch_id;
        this.reset = true;
        this.getGoods();
    },
    onReachBottom: function () {
        const self = this;
        this.reset = false;
        if (self.args || self.load) return;
        self.load = true;
        let page = self.page + 1;
        self.$request({
            url: self.$api.mch.goods,
            data: {
                page: page,
                mch_id: self.mch_id,
                sort: 2,
                mch_status: 2,
                cat_id: 0,
                sort_type: 0,
            }
        }).then(info => {
            if (info.code === 0) {
                let goods_list;
                if (self.sort === 5) {
                    goods_list = self.formatList(self.goods_list, info.data.list);
                } else {
                    goods_list = self.goods_list.concat(info.data.list);
                }
                [self.page, self.args, self.goods_list] = [page, info.data.list.length === 0, goods_list];
            }
            self.load = false;
        });
    },
    methods: {
        getGoods: function () {
            const self = this;
            this.$showLoading({title: '加载中'});
            self.$request({
                url: self.$api.mch.goods,
                data: {
                    page: 1,
                    mch_id: self.mch_id,
                    sort: 2,
                    mch_status: 2,
                    cat_id: 0,
                    sort_type: 0,
                }
            }).then(info => {
                self.$hideLoading();
                if (info.code === 0) {
                    self.onStart = true;
                    self.goods_list = info.data.list;
                }
            }).catch(info => {
                self.$hideLoading();
            })
        },
    },
    components: {
        'app-no-goods': appNoGoods, mchNavbar, uOrdinaryList
    },
}
</script>

<style scoped lang="scss">
</style>